﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head lang="en" >
  <title>留言板</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <%--<link href="${ctx}/assets/css/jquery-ui-1.10.3.custom.css" rel="stylesheet">--%>
    <%--<script src="${ctx}/assets/js/jquery-1.9.1.js"></script>--%>
    <%--<script src="${ctx}/assets/js/jquery-ui-1.10.3.custom.js"></script>--%>


</head>
<body >
<%@include file="/WEB-INF/jsp/test/sidebar.jsp" %>

<div id="notearea">
  <div id="notetitle">
    <div id="title">
      <div >
        <span>留言板</span>
        <label id="addnote">留言</label>
      </div>
    </div>

    <%--<div id="addnotearea" title="请输入留言" style="margin-left: 10px;margin-top:50px; width:880px;height: 200px; background-color: rgba(58, 93, 249, 0.90);">--%>
      <%--&lt;%&ndash;<textarea style="float: left;" rows="10" cols="143"></textarea>&ndash;%&gt;--%>
    <%--</div>--%>
    <div id="mynote">
      <div id="mynote1">
        <div >
          <span>主人寄语</span>
        </div>
      </div>
    </div>
  </div>

  <div id="mywhishes">
    <span>
      抓住今天吧!紧紧地把它抓住吧!今天的分分秒秒，都要有所作为，有所进步，有所登攀!<br/>
      Seize today! Firmly grasp it! Today's every minute, all need to do something to make progress, something to climb!
    </span>
  </div>

  <div id="usernote">
    <div id="note1">
      <div id="username1"></div>
      <div id="content1"></div>
      <div id="time1"></div>
    </div>
    <div id="note2">
      <div id="username2"></div>
      <div id="content2"></div>
      <div id="time2"></div>
    </div>
    <div id="note3">
      <div id="username3"></div>
      <div id="content3"></div>
      <div id="time3"></div>
    </div>
  </div>

  <div id="pagediv">
    <a id="prevpage">上一页</a>
    <label id="currectpage">1</label>
    <a id="nextpage">下一页</a>

  </div>
</div>

<div id="dialog" >
  <textarea id="notecontent" style="float: left;" rows="10" cols="40"></textarea>
    <input id="useremail" type="hidden" value="${email}"/>
</div>

<script>

  $( "#dialog" ).dialog({ autoOpen: false });


  $(function() {
    var path = window.location.pathname.split("/")[0];
    var page=1;
    var row=3;

      $("#prevpage").click(function(){
          if(page>1){
              page--;
              $("#currectpage").html(page);
              $.ajax({
                  url: path + "/note/getallnotes",
                  type: "POST",
                  data: {
                      page:page,
                      row: row,
                      userEmail:$("#useremail").val()
                  },
                  dataType: "json",
                  success: function (json) {

                      if (json.success == true) {
                          $("#username1").html(json.noteList[0].userId.userName);
                          $("#content1").html(json.noteList[0].noteContent);
                          $("#time1").html(json.noteList[0].date);

                          $("#username2").html(json.noteList[1].userId.userName);
                          $("#content2").html(json.noteList[1].noteContent);
                          $("#time2").html(json.noteList[1].date);

                          $("#username3").html(json.noteList[2].userId.userName);
                          $("#content3").html(json.noteList[2].noteContent);
                          $("#time3").html(json.noteList[2].date);
                      }
                  }
              });
          }else{
              alert("已经到顶啦~")
          }
      });

      $("#nextpage").click(function(){
          page++;

          $.ajax({
              url: path + "/note/getallnotes",
              type: "POST",
              data: {
                  page:page,
                  row: row,
                  userEmail:$("#useremail").val()
              },
              dataType: "json",
              success: function (json) {

                  if (json.success == true) {

                      if(json.noteList[0]==null){
                          alert("已经到最后一页啦!");
                          page--;

                      }else{
                          $("#username1").html("");
                          $("#content1").html("");
                          $("#time1").html("");

                          $("#username2").html("");
                          $("#content2").html("");
                          $("#time2").html("");

                          $("#username3").html("");
                          $("#content3").html("");
                          $("#time3").html("");
                      }
                      $("#currectpage").html(page);
                      $("#username1").html(json.noteList[0].userId.userName);
                      $("#content1").html(json.noteList[0].noteContent);
                      $("#time1").html(json.noteList[0].date);

                      $("#username2").html(json.noteList[1].userId.userName);
                      $("#content2").html(json.noteList[1].noteContent);
                      $("#time2").html(json.noteList[1].date);

                      $("#username3").html(json.noteList[2].userId.userName);
                      $("#content3").html(json.noteList[2].noteContent);
                      $("#time3").html(json.noteList[2].date);
                  }else{
                      alert("error")
                  }
              }
          });
      })

     $.ajax({
      url: path + "/note/getallnotes",
      type: "POST",
      data: {
        page:page,
        row: row,
        userEmail:$("#useremail").val()
      },
      dataType: "json",
      success: function (json) {
        if (json.success == true) {
          $("#username1").html(json.noteList[0].userId.userName);
          $("#content1").html(json.noteList[0].noteContent);
          $("#time1").html(json.noteList[0].date);

          $("#username2").html(json.noteList[1].userId.userName);
          $("#content2").html(json.noteList[1].noteContent);
          $("#time2").html(json.noteList[1].date);

          $("#username3").html(json.noteList[2].userId.userName);
          $("#content3").html(json.noteList[2].noteContent);
          $("#time3").html(json.noteList[2].date);
        }
      }
    });

    $("#addnote").click(function(){

      $("#dialog" ).dialog("open");

      $("#dialog" ).dialog({
        title:'留言区',
        buttons:{"提交": function(){
          /**
           * 添加留言
           * */

          $.ajax({
            url: path + "/note/addnotes",
            type: "POST",
            data: {
                userEmail:$("#useremail").val(),
                content: $("#notecontent").val()
            },
            dataType: "json",
            success: function (json) {
                alert("留言成功");
                $('#dialog').dialog('close');
                $.ajax({
                    url: path + "/note/getallnotes",
                    type: "POST",
                    data: {
                        page:page,
                        row: row
                    },
                    dataType: "json",
                    success: function (json) {
                        if (json.success == true) {
                            $("#username1").html(json.noteList[0].userId.userName);
                            $("#content1").html(json.noteList[0].noteContent);
                            $("#time1").html(json.noteList[0].date);

                            $("#username2").html(json.noteList[1].userId.userName);
                            $("#content2").html(json.noteList[1].noteContent);
                            $("#time2").html(json.noteList[1].date);

                            $("#username3").html(json.noteList[2].userId.userName);
                            $("#content3").html(json.noteList[2].noteContent);
                            $("#time3").html(json.noteList[2].date);
                        }
                    }
                });
            }
          })
         },"取消": function(){
          $('#dialog').dialog('close');
        }},
        height: 380, width:420,
        resizable:false,
        draggable:false
      });
    })


  });

</script>
<%@include file="/WEB-INF/jsp/test/endline.jsp" %>
</body>
</html>